<template>
	<view class="repair-container">
		<!-- 工单列表 -->
		<view class="repair-list" v-if="repairList.length > 0">
			<view class="repair-item" v-for="(item, index) in repairList" :key="index">
				<view class="item-header">
					<text class="order-no">工单号：{{item.orderNo}}</text>
					<text class="status" :class="item.status">{{item.statusText}}</text>
				</view>
				<view class="item-content">
					<view class="info-row">
						<text class="label">报修时间</text>
						<text class="value">{{item.createTime}}</text>
					</view>
					<view class="info-row">
						<text class="label">报修地址</text>
						<text class="value">{{item.address}}</text>
					</view>
					<view class="info-row">
						<text class="label">问题描述</text>
						<text class="value">{{item.description}}</text>
					</view>
					<view class="info-row" v-if="item.appointmentTime">
						<text class="label">预约时间</text>
						<text class="value">{{item.appointmentTime}}</text>
					</view>
				</view>
				<view class="item-footer">
					<u-button 
						v-if="item.status === 'pending'" 
						type="primary" 
						size="small"
						@click="cancelRepair(item)">取消工单</u-button>
				</view>
			</view>
		</view>

		<u-empty v-else text="暂无维修工单" mode="list"></u-empty>

		<!-- 新增报修按钮 -->
		<view class="add-btn">
			<u-button type="primary" text="新增报修" @click="showRepairForm = true"></u-button>
		</view>

		<!-- 报修表单弹窗 -->
		<u-popup :show="showRepairForm" mode="bottom" @close="showRepairForm = false">
			<view class="repair-form">
				<view class="form-header">
					<text>报修信息</text>
					<u-icon name="close" @click="showRepairForm = false"></u-icon>
				</view>
				<view class="form-content">
					<u-form :model="form" ref="uForm">
						<u-form-item label="报修地址" prop="address">
							<u-input v-model="form.address" placeholder="请选择报修地址"></u-input>
						</u-form-item>
						<u-form-item label="问题描述" prop="description">
							<u-input
								v-model="form.description"
								type="textarea"
								placeholder="请详细描述遇到的问题"
							></u-input>
						</u-form-item>
						<u-form-item label="预约时间" prop="appointmentTime">
							<u-input v-model="form.appointmentTime" placeholder="请选择预约时间"></u-input>
						</u-form-item>
					</u-form>
					<u-button type="primary" @click="submitRepair">提交报修</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			repairList: [
				{
					orderNo: 'R202502190001',
					status: 'pending',
					statusText: '待处理',
					createTime: '2025-02-19 10:30',
					address: '南山区科技园南区3栋',
					description: '水压不稳定',
					appointmentTime: '2025-02-20 14:00-16:00'
				},
				{
					orderNo: 'R202502180001',
					status: 'processing',
					statusText: '处理中',
					createTime: '2025-02-18 15:20',
					address: '南山区科技园南区3栋',
					description: '水表显示异常',
					appointmentTime: '2025-02-19 09:00-11:00'
				}
			],
			showRepairForm: false,
			form: {
				address: '',
				description: '',
				appointmentTime: ''
			}
		}
	},
	methods: {
		cancelRepair(item) {
			uni.showModal({
				title: '提示',
				content: '确定要取消该工单吗？',
				success: (res) => {
					if (res.confirm) {
						// TODO: 调用取消工单接口
						uni.showToast({
							title: '工单已取消',
							icon: 'success'
						})
					}
				}
			})
		},
		submitRepair() {
			// TODO: 表单验证和提交
			uni.showToast({
				title: '提交成功',
				icon: 'success'
			})
			this.showRepairForm = false
		}
	}
}
</script>

<style lang="scss" scoped>
.repair-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 20rpx;
	padding-bottom: 120rpx;

	.repair-list {
		.repair-item {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.item-header {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #eee;

				.order-no {
					color: #666;
					font-size: 28rpx;
				}

				.status {
					font-size: 28rpx;

					&.pending {
						color: #ff9900;
					}

					&.processing {
						color: #1296db;
					}

					&.completed {
						color: #19be6b;
					}

					&.cancelled {
						color: #909399;
					}
				}
			}

			.item-content {
				.info-row {
					display: flex;
					justify-content: space-between;
					margin-bottom: 16rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.label {
						color: #666;
						font-size: 28rpx;
						width: 160rpx;
					}

					.value {
						color: #333;
						font-size: 28rpx;
						flex: 1;
						text-align: right;
					}
				}
			}

			.item-footer {
				margin-top: 20rpx;
				display: flex;
				justify-content: flex-end;
			}
		}
	}

	.add-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.repair-form {
		padding: 30rpx;

		.form-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;

			text {
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.form-content {
			.u-button {
				margin-top: 30rpx;
			}
		}
	}
}
</style>
